<template>
  <div class="type-group">
  	<div class="group-content">
  		<slot></slot>
  	</div>
  	<div class="hd-box">
  		<div class="item">{{name}}</div>
			<div class="item" style="padding-bottom:1px;" title="编辑" @click="showEdit()">
				<el-icon :size="12">
			    <Edit />
			  </el-icon>
			</div>
  		<div class="item" style="padding-bottom:1px;" title="删除" @click="deleteGroup()">
  			<el-icon :size="12">
			    <Delete />
			  </el-icon>
  		</div>
  	</div>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import {Edit, Delete} from '@element-plus/icons-vue'

	const emits = defineEmits(['edit', 'delete']);
	const props = defineProps({
		name: {
			type: String,
			default: ''
		}
	})

	const _d = reactive({

	})

	onMounted(() => {
	
	})

	function showEdit() {
		emits('edit');
	}

	function deleteGroup() {
		emits('delete');
	}

</script>

<style lang="scss" scoped>
.type-group {
	position: relative;
	padding: 3px;
	border: 1px dashed #409EFF;
	border-radius: 3px;
	text-indent: 0;
	&:hover > .hd-box {
		display: flex;
	}
	.hd-box {
		display: none;
		position: absolute;
		z-index: 2;
		right: 0px;
		bottom: -10px;
		align-items: center;
		color: #fff;
		.item {
			margin-right: 5px;
			background: #409EFF;
			height: 16px;
			line-height: 14px;
			padding: 0 4px;
			font-size: 12px;
			display: flex;
			align-items: center;
			border-radius: 2px;
			cursor: pointer;
			white-space: nowrap;
		}
	}
}
</style>